<template>
  <div class="app">
    <h1>中文CLIP文到图搜索应用</h1>
    <p class="des">
      本项目为CLIP模型的中文版本DEMO，中文CLIP使用大规模中文数据进行训练（~2亿图文对），可用于图文检索和图像、文本的表征提取，应用于搜索、推荐等应用场景。注：检索时间小于1秒，耗时主要源自一些审核机制。
    </p>
    <div class="content">
      <div class="content-left">
        <div class="input-text">
          <em>请填写文本</em>
          <textarea
            ref="textarea"
            v-model="inputValue"
            @input="setHeight"
            rows="1"
          ></textarea>
        </div>
        <div class="select-area">
          <div class="progress-bar">
            <div class="range_des">
              <em>返回图片数（可能被过滤部分）</em>
              <span>{{ picNums }}</span>
            </div>
            <div class="bar">
              <el-slider v-model="picNums" max="20"></el-slider>
            </div>
          </div>
          <div class="pic_isshow">
            <em>是否显示缩略图</em>
            <el-radio-group
              v-model="picIsshow"
              size="large"
              style="
                display: flex;
                justify-content: space-around;
                margin: 3vh 0;
              "
            >
              <el-radio value="true" border>是</el-radio>
              <el-radio value="false" border>否</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="submit_btn">搜索</div>
      </div>
      <div class="content-right">
        <div v-if="picIsshow === 'true'" class="pic_show">
          <div class="pic" v-for="(item, index) in srcList" :key="index">
            <el-image
              style="width: 100%; height: 100%"
              :src="item"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              :initial-index="index"
              fit="cover"
            ></el-image>
          </div>
        </div>
        <div v-else class="word"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let inputValue = ref<string | null>()
let picNums = ref<number>(5)
let picIsshow = ref<string>('true')
const textarea = ref<HTMLTextAreaElement | null>()
const setHeight = () => {
  if (textarea.value) {
    textarea.value.style.height = 'auto'
    textarea.value.style.height = `${textarea.value.scrollHeight}px`
    console.log(textarea.value.scrollHeight)
  }
}

let srcList = ref<string[]>([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
])
</script>

<style lang="less" scoped>
.app {
  margin: 0 auto;
  border: 3px solid rgb(205, 197, 197);
  border-radius: 15px;
  width: 80vw;
  min-height: 100vh;
  text-align: center;
  .des {
    margin: 0 2vw;
    margin-bottom: 1vh;
    font-size: 18px;
    line-height: 1.6em;
  }
  .content {
    margin: 0 2vw;
    border: 2px dotted blue;
    border-radius: 5px;
    padding: 0.5vw;
    text-align: left;
    display: flex;
    align-items: flex-start;
    .content-left {
      width: 24vw;
      border: 1px solid gray;
      border-radius: 4px;
      padding: 1vw;
      box-sizing: border-box;
      .input-text {
        border: 1px solid gray;
        border-radius: 3px;
        padding: 1vw;
        margin-bottom: 3vh;

        em {
          display: block;
          margin-bottom: 2%;
          font-style: normal;
          color: rgb(179, 177, 177);
        }
        textarea {
          box-sizing: border-box;
          border-radius: 3px;
          box-shadow: 0 0 1px;
          resize: vertical;
          overflow: hidden;
          width: 100%;
          padding: 10px;
          font-size: 16px;
        }
      }
      .select-area {
        border: 1px solid gray;
        border-radius: 3px;
        .progress-bar {
          border: 1px solid gray;
          border-radius: 3px;
          padding: 1vw;
          .range_des {
            display: flex;
            justify-content: space-between;
            em {
              display: block;
              margin-bottom: 2%;
              font-style: normal;
              color: rgb(179, 177, 177);
            }
            span {
              color: rgb(20, 19, 19);
            }
          }
          .bar {
            margin: 2vh 1vw;
          }
        }
        .pic_isshow {
          border: 1px solid gray;
          border-radius: 3px;
          padding: 1vw;
          em {
            display: block;
            margin-bottom: 2%;
            font-style: normal;
            color: rgb(179, 177, 177);
          }
        }
      }
      .submit_btn {
        margin: 3vh auto;
        margin-bottom: 1vh;
        background-color: #eee;
        width: 80%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        font-weight: bold;
        border-radius: 10px;
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
        &:hover {
          background-color: pink;
          box-shadow: 0 0 2px 1px gray;
        }
        &:active {
          background-color: rgb(57, 1, 35);
        }
      }
    }
    .content-right {
      background-color: #eee;
      width: 54vw;
      min-height: 50vh;
      margin-left: 1vw;
      border: 1px solid gray;
      border-radius: 4px;
      padding: 1vw;
      box-sizing: border-box;
      .pic_show {
        display: flex;
        flex-wrap: wrap;
        .pic {
          padding: 0.5vw;
          box-sizing: border-box;
          height: 15vh;
          width: 33.3%;
        }
      }
    }
  }
}
</style>
